<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">

<title>H+ 后台主题UI框架 - 数据表格</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description"
	content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">

<link href="/static/css/bootstrap.min.css?v=3.4.0" rel="stylesheet">
<link href="/static/font-awesome/css/font-awesome.css?v=4.3.0" rel="stylesheet">

<!-- Data Tables -->
<link href="/static/css/plugins/dataTables/dataTables.bootstrap.css"
	rel="stylesheet">

<link href="/static/css/animate.css" rel="stylesheet">
<link href="/static/css/style.css?v=3.0.0" rel="stylesheet">

</head>

<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>
							媒体库列表
						</h5>
						<div class="ibox-tools">
							<a class="collapse-link"> <i class="fa fa-chevron-up"></i>
							</a> <a class="dropdown-toggle" data-toggle="dropdown"
								href="table_data_tables.html#"> <i class="fa fa-wrench"></i>
							</a>
							<ul class="dropdown-menu dropdown-user">
								<li><a href="table_data_tables.html#">选项1</a></li>
								<li><a href="table_data_tables.html#">选项2</a></li>
							</ul>
							<a class="close-link"> <i class="fa fa-times"></i>
							</a>
						</div>
					</div>
					<div class="ibox-content">
						<div>
							<button class="btn btn-primary upload-btn" type="button">上传</button>
						</div>
						<table
							class="table table-striped table-bordered table-hover dataTables-example">
							<thead>
								<tr>
									<th>文件名</th>
									<th>日期</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody>
								<c:forEach items="${files}" var="file">
								<tr class="gradeX">
									<td><c:out value="${file.key}"></c:out></td>
									<td><c:out value="${file.date}"></c:out></td>
									<td>
										<button class="btn btn-primary" type="button">修改</button>
										<button class="btn btn-default" type="button">删除</button>
									</td>
								</tr>
								</c:forEach>
							</tbody>
							<tfoot>
								<tr>
									<th>文件名</th>
									<th>日期</th>
									<th>操作</th>
								</tr>
							</tfoot>
						</table>

					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 全局js -->
	<script src="/static/js/jquery-2.1.1.js"></script>
	<script src="/static/js/bootstrap.min.js?v=3.4.0"></script>



	<script src="/static/js/plugins/jeditable/jquery.jeditable.js"></script>

	<!-- Data Tables -->
	<script src="/static/js/plugins/dataTables/jquery.dataTables.js"></script>
	<script src="/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>

	<!-- 自定义js -->
	<script src="/static/js/content.js?v=1.0.0"></script>


	<!-- Page-Level Scripts -->
	<script>
		$(document).ready(function() {
			$(".dataTables-example").dataTable();
			var a = $("#editable").dataTable();
			/*
			a.$("td").editable("../example_ajax.php", {
				"callback" : function(d, c) {
					var b = a.fnGetPosition(this);
					a.fnUpdate(d, b[0], b[1])
				},
				"submitdata" : function(c, b) {
					return {
						"row_id" : this.parentNode.getAttribute("id"),
						"column" : a.fnGetPosition(this)[2]
					}
				},
				"width" : "90%",
				"height" : "100%"
			})
			*/
		});
		function fnClickAddRow() {
			$("#editable").dataTable()
					.fnAddData(
							[ "Custom row", "New row", "New row", "New row",
									"New row" ])
		};
		
		$(function(){
			$(".upload-btn").on("click",function(){
				//创建或跳转到对应窗口
				window.parent.openUploadWindow();
			});
		});
	</script>


	<!--统计代码，可删除-->

</body>

</html>